<template name="goods-order">
	<view>
		<view v-if="tlist.length == 0" style="color: #FF6553;text-align: center;">
			暂无数据~
		</view>
		<view v-else class="list" v-for="item in tlist" :key='item.id' @click="goToDetail(item)">
			<view class="list-content">
				<view class="content-left size-26 ">
					<text>{{item.jdName}}</text>
					<view class="home-price">
						<text>低价：</text>
						<view style="color:#000 ; font-size: 24rpx;">
							<text style="font-weight: bold; font-size: 30rpx;">￥</text>
							{{item.djzePrice}}
						</view>
					</view>
				</view>
				<view>
					<view :class="item.orderStatus == '已完成' ? 'btnTxt' : 'btnTxtt'">{{item.orderStatus}}</view>
				</view>
			</view>
			<view class="user-line">
				<text style="margin-top: 22rpx;margin-left: 20rpx;">联系人：{{item.lianxiren}}</text>
				<text class="check-txt">查看详情</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		name: "goods-order",
		data() {
			return {
				btnTxtt: "btnTxtt", //订单状态
				btnTxt: "btnTxt"

			};
		},
		// 此处定义传入的数据,属性
		props: {
			tlist: {
				type: Array,
				value: null
			},
			types: {
				type: Number,
				value: null
			}
		},
		//组件生命周期
		created: function(e) {

		},
		mounted() {

		},
		onLoad() {

		},
		methods: {
			// 订单详情
			goToDetail(item) {
				uni.navigateTo({
					url: `/pages/order/orderDetail?id=${item.id}`
				})
			},

		}

	}
</script>

<style lang="scss" scoped>
	.home-price {
		display: flex;
	}

	.check,
	.quit {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
	}

	.btnTxt {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: rgb(155, 255, 192);
		border-radius: 20rpx;
		font-size: 24rpx;
		text-align: center;
	}

	.btnTxtt {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: rgb(245, 113, 36);
		border-radius: 20rpx;
		font-size: 24rpx;
		text-align: center;
	}

	.user-line {
		border-top: 2rpx solid #ccc;
		display: flex;
		margin: 20rpx;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.check-txt {
			width: 170rpx;
			margin-top: 22rpx;
			background-image: url(@/static/img/shouzhi-xiangshang.png);
			background-repeat: no-repeat;
			background-size: contain;
			background-position: 120rpx 0;
		}
	}

	.list {
		margin: 20rpx;
		height: 200rpx;
		box-shadow: 0 8rpx 16rpx 0 rgba(83, 66, 49, 0.08);
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		margin-top: -50rpx;
		padding: 20rpx;
		margin-bottom: 80rpx;
		background-color: rgba(255, 255, 255, .5);
	}

	.list-content {
		display: flex;
		justify-content: space-between;
		line-height: 40rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
</style>